import {} from "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js";

const $smallpic =$('.smallpic');
const $smallbox =$('.smallbox');
const $bigbox = $('.bigbox');
const $bigpic =$('.bigpic');
const $shoptitle=$('.shoptitle');
const $shopprice =$('.shopprice');
const $smallpic_img=$('.smallpic img');
const $piclistbox=$('.piclistbox ul');
const $toleft=$('.toleft');
const $toright=$('.toright');
let $lilenth;
let $count;
let $nowcount;
let $ul_width;
let $left=0;

let $sid =location.search.substring(1).split('=')[1];
if (!$sid) {
    $sid = 1;
    location.href='http://10.31.165.32/com.111.www/src/detail.html?'
}

$.ajax({
    url:'http://10.31.165.32/com.111.www/php/getsid.php',
    data:{ datasid:$sid },
    dataType:'json',
}).done(function(data){
    //渲染页面
    //console.log(data);
    $smallpic_img.attr('src',data.picurl);
    $bigpic.attr('src',data.picurl);
    $shoptitle.html(data.title);
    $shopprice.html('￥'+data.price);
    let $picarr = data.piclisturl.split(',');
    //console.log($picarr);
    let $strHtml = '';
    $.each($picarr, function(index, value) {
        $strHtml += ` 
            <li>
                <img src="${value}"/>    
            </li>
        `;
    });
    $piclistbox.html($strHtml);
    $lilenth = $('.piclistbox ul li').length;
    $ul_width =51*$lilenth;
    //console.log($ul_width);
    $count=Math.ceil($ul_width/255);

    if ($lilenth <= 5) {
        $toright.css('background-position', '100px 100px');
    } 

//小图滑动
    $nowcount=0;

    $toright.on('click',function(){  
        if($nowcount<$count-1){
            $nowcount++;
            //console.log($nowcount);
            $left-=255;
            $piclistbox.stop().animate({
                left:$left,
            });
        }
    });

    //小图滑动(滑回)
    $toleft.on('click',function(){
        if($nowcount>=1){
            $nowcount--;
            //console.log($nowcount);
            $left+=255;
            $piclistbox.stop().animate({
                left:$left,
            });
        }
    })
    //经过小图切大图
    $piclistbox.on('mouseover','li',function(){
        $(this).css('border','1px solid red');
        let $url = $(this).find('img').attr('src');
        $smallpic_img .attr('src', $url);
        $bigpic.attr('src', $url);
    })
    $piclistbox.on('mouseout','li',function(){
        $(this).css('border','1px solid #fff');
    });
});



//放大镜
$smallbox.width($smallpic.outerWidth()*$bigbox.outerWidth()/$bigpic.outerWidth());
$smallbox.height($smallpic.outerHeight()*$bigbox.outerHeight()/$bigpic.outerHeight());

let $bili =$bigpic.outerHeight()/$smallpic.outerHeight();

$smallpic.hover(function(){
    $smallbox.show();
    $bigbox.show();
},function(){
    $smallbox.hide();
    $bigbox.hide();
});

$smallpic.on('mousemove',function(ev){
   let $left= ev.pageX-$smallpic.offset().left-$smallbox.outerWidth()/2;
   let $top =ev.pageY-$smallpic.offset().top-$smallbox.outerHeight()/2;
    if($left<0){
        $left=0
    }else if($left>$smallpic.outerWidth()-$smallbox.outerWidth()){
        $left=$smallpic.outerWidth()-$smallbox.outerWidth()
    }
    if($top<0){
        $top=0
    }else if($top>$smallpic.outerHeight()-$smallbox.outerHeight()){
        $top=$smallpic.outerHeight()-$smallbox.outerHeight()
    }
    $smallbox.css('left',$left);
    $smallbox.css('top',$top);
    $bigpic.css('left',-$left*$bili);
    $bigpic.css('top',-$top*$bili);
});


//购物车
let $arrsid = [];
let $arrnum = [];

function getLocalStorage() {
    if (localStorage.getItem('localsid') && localStorage.getItem('localnum')) { 
        $arrsid = localStorage.getItem('localsid').split(','); 
        $arrnum = localStorage.getItem('localnum').split(',');
    } else {
        $arrsid = [];
        $arrnum = [];
    }
}

const $cartbtn = $('.cartbtn'); 
const $number = $('.number');

$cartbtn.on('click', function() {
    getLocalStorage();
    if ($arrsid.includes($sid)) { 
        let $index = $arrsid.indexOf($sid); 
        let temp=parseInt($arrnum[$index]) + parseInt($number.val());
        if(temp>=50){
            temp=50;
        }
        $arrnum[$index] = temp;
        localStorage.setItem('localnum', $arrnum); 
    } else { 
        $arrsid.push($sid); 
        localStorage.setItem('localsid', $arrsid);
        $arrnum.push($number.val()); 
        localStorage.setItem('localnum', $arrnum);
    }
});

//数量框正则,数量框加减
if($number.val()==''){
    $number.val(1);
}
$number.on('blur',function(){
    if($number.val()==''){
        $number.val(1);
    } 
})  

const $prv =$('.prv');
const $nex =$('.nex');
$prv.on('click',function(){
    $number.val(parseInt($number.val())+1);
    if($number.val()>50){
        $number.val(50);
    }
})
$nex.on('click',function(){
    $number.val(parseInt($number.val())-1);
    if($number.val()<1){
        $number.val(1);
    }
})

$number.on('keyup',function(){ 
    let val = $number.val().replace(/[^0-9]/ig,"");
    $number.val(val);
    if($number.val()>50){
        $number.val(50);
    }
})

